<template>
    <view class="content">
        <!-- 顶部 -->
        <view class="nav">
            <image class="navImg" src="@/static/nav.png" mode="scaleToFill" />
        </view>
        <view class="bot">
            <image class="character" src="@/static/renwu.png" mode="scaleToFill" />
            <view class="right-cont">
                <image class="SelectPhoto" src="@/static/SelectPhoto.png" mode="scaleToFill" />
                <!-- 相册 -->
                <button class="album" @click="select('album')"></button>
                <!-- 拍照 -->
                <button class="photograph" lockScroll @click="select('camera')"></button>
                <!-- <button class="photograph" lockScroll @click="photograph"></button> -->
            </view>
        </view>

        <!-- <button class="" @click="select('album')">选择图片</button>
        <button class="" @click="select('camera')">拍照</button> -->

        <t-cropper
            mode="free"
            :imageUrl="model.imageUrl"
            :width="900"
            :height="1300"
            :radius="0"
            :delay="150"
            @cancel="onCancel"
            @confirm="onConfirm"
        ></t-cropper>

        <!-- 遮罩层 -->
        <wd-overlay :show="overlayShow">
            <view class="wrapper">
                <image class="loading" src="@/static/loading.png" mode="scaleToFill" />
                <text class="wrapperText">测评中...</text>
            </view>
        </wd-overlay>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { CheckWritingStandards } from '@/utils/thirdParty';
import akicryptojs from '@/uni_modules/aki-cryptojs/js_sdk/aki-cryptojs';
import { getGurrentTime } from '@/utils/tool';
import {
    getCalligraphy
} from '@/api/index';
var model = reactive({
    imageUrl: '',
    resultUrl: [],
});
const overlayShow = ref(false); //遮罩层

const select = (type: string) => {
    // uni.navigateTo({
    //    url:'/pages/evaluationResults/evaluationResults'
    // })
    uni.chooseImage({
        count: 1,
        sourceType: [type],
        success: res => {
            console.log('选择图片', res);
            // #ifdef H5
            onConfirm({
                tempFilePath:res.tempFilePaths[0]
            })
            // #endif
            // #ifdef APP-PLUS
            model.imageUrl = res.tempFilePaths[0];
            // #endif
            
        },
    });
};
// 自定义拍摄
function photograph(){
    uni.navigateTo({ url: '/pages/camera/camera' })
}

function generateSignature(message: string, secretKey: string): string {
    return akicryptojs.EncryptHmacSHA256(secretKey, message);
}

async function onConfirm(res) {
    // const datas = await getCalligraphy()
    const datas  ={
        key:'1000xxl',
        channel_id:1000,
        symbol_id:100000
    }
    const SECRET_KEY = datas.key;
    const times = new Date().getTime()
    const message = `channel_id=${datas.channel_id}&timestamp=${times}`
    console.log('message', message);
    let signature = generateSignature(SECRET_KEY, message);
    onCancel();
    console.log('转换后', signature);
    overlayShow.value = true;


    await CheckWritingStandards({
        file: res.tempFilePath,
        token: signature,
        channel_id:datas.channel_id,
        request_id:'123456',
        symbol_id:datas.symbol_id,
        timestamp:times
    })
        .then(res => {
            
            const jsons = JSON.stringify(res);
            console.log('jsons',jsons)
            uni.navigateTo({
                url: '/pages/evaluationResults/evaluationResults?score=' + jsons,
            });
        })
        .catch(error => {
            console.log('error--',error)
            uni.showToast({
                title: '图片无法识别请重新拍照'+error.code,
                duration: 2000,
                icon:'none'
            });
        });
        overlayShow.value = false;
}

const prviewImgae = (index, url) => {
    uni.previewImage({
        current: index, // 当前资源下标
        urls: [url],
    });
};

const onCancel = () => {
    model.imageUrl = '';
};
</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: center;
    // width: 100%;
    // height: 100vh;
    // background-image: url('@/static/bgImg.png');
    // background-size: 100%;

    // background-repeat: no-repeat;

    .nav {
        width: 100%;
        height: 37.5rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 21.875rpx;

        .navImg {
            width: 133.203rpx;
            height: 100%;
        }
    }

    .character {
        width: 343.75rpx;
        height: 343.75rpx;
    }

    .bot {
        flex: 1;
        padding: 12.5rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 52.734rpx;
        .right-cont {
            width: 278.125rpx;
            height: 192.188rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
            gap: 46.875rpx;
            .SelectPhoto {
                position: absolute;
                width: 92.578rpx;
                height: 21.875rpx;
                top: 0px;
                left: 0px;
            }

            .album {
                width: 117.188rpx;
                height: 148.438rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-image: url('@/static/album.png');
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-color: transparent;
            }
            .photograph {
                width: 117.188rpx;
                height: 148.438rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-image: url('@/static/photograph.png');
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                background-color: transparent;
            }
        }
    }
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // width:31.25rpx;
    .wrapperText {
        font-family: 'ZhiMangXing-Regular';
        color: #ffffff;
        font-size: 18.75rpx;
        margin-top: 18.75rpx;
    }

    .loading {
        width: 62.5rpx;
        height: 62.5rpx;
        animation: rotate 3s linear infinite;
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}
</style>
